<template>
    <div style="width:100%;height: 100%;">
        <div class="taskList">
            <x-header header-background-color="#fff" :left-options="{showBack: true,preventGoBack:true}"  @on-click-back="GoBack">任务清单
                <!-- <a slot="right">Feedback</a> -->
            </x-header>
            <div class="taskList_content" ref="container">
                <mu-load-more @refresh="refresh" :refreshing="refreshing" :loading="loading" @load="load">
                    <div class="taskList_content_list" v-for="(item,index) in taskList" :key="index">
                        <div class="taskList_content_list_task" @click="openInfo(item)">
                            <div class="taskList_content_list_task_tit clearfix">
                                <div>
                                    {{item.taskname}}
                                </div>
                                <div class="clearfix">
                                    <span :class="{'jieshu':item.flagname=='已结束'}">
                                    <!-- <span :class="{'wei':item.flagname=='未接收','yi':item.flagname=='执行中','jieshu':item.flagname=='已结束'}"> -->
                                        {{item.flagname}}
                                    </span>
                                    <span v-if="item.flagname!='已结束'">
                                        {{item.tasklevelname}}
                                    </span>
                                </div>
                            </div>
                            <div class="taskList_content_list_task_feedNum">
                                已反馈
                                <span>
                                    {{item.num}}
                                </span>
                                次
                            </div>
                            <div class="taskList_content_list_task_unitTime">
                                <span>
                                    {{item.org_name}}
                                </span>
                                <span>
                                    {{item.sendtime}} 发布
                                </span>
                            </div>
                            <div class="taskList_content_list_task_content">
                                {{item.taskcontent}}
                                <!-- <span>...</span> -->
                            </div>
                        </div>
                        <div v-if="item.feedbackFlag">
                            <div class="taskList_content_list_feedback" @click="openFdInfo(item1)" v-for="(item1,index1) in item.feedback" :key="index1">
                                <div>
                                    <span>
                                        {{item1.tasktitle}}
                                    </span>
                                    <span>
                                        {{item1.feedbacktime}} 反馈
                                    </span>
                                </div>
                                <div>
                                    {{item1.backinfo}}
                                </div>
                            </div>
                        </div>
                        <div class="taskList_content_list_botton">
                            <img @click="feedbackFlagClick(item)" v-if="!item.feedbackFlag&&item.num!=0" src="../../assets/images/taskList/bot.png"/>
                            <img @click="feedbackFlagClick(item)" v-if="item.feedbackFlag&&item.num!=0" src="../../assets/images/taskList/top.png"/>
                            <img src="../../assets/images/taskList/write.png" @click="commitfeedback(item)" />
                        </div>
                    </div>
                    <div v-if="taskList&&taskList.length==0&&showNoData" style="width:100%;text-align:center;padding-top: 10%;">
                        <img src="../../assets/images/notdata.png" />
                    </div>
                </mu-load-more>
            </div>
        </div>
        <popup v-if="taskModel" v-model="taskModel" height="100%" width="100%" position="right">
            <taskDetails :param="taskModelParam" @close="closeInfo"/>
        </popup>
        <popup v-if="taskFdModel" v-model="taskFdModel" height="100%" width="100%" position="right">
            <taskFdDetails :param="taskFdModelParam" @close="closeInfo"/>
        </popup>
        <popup v-if="commitfeedbackModel" v-model="commitfeedbackModel" height="100%" width="100%" position="right">
            <commitfeedback :taskId="taskid" @close="closeInfo" @success="refresh"/>
        </popup>
    </div>
</template>
 
<script>
import {XHeader,Popup} from 'vux'
import taskDetails from "./taskDetails.vue";
import taskFdDetails from "./taskFdDetails.vue";
import commitfeedback from "./commitfeedback";
import { taskListAjaxData,taskFdAjaxData } from '@/assets/js/service'

export default {
  props: ["refid"],
  components: {
    XHeader,
    Popup,
    taskDetails,
    taskFdDetails,
    commitfeedback
  },
  data () {
    return {
        // 分页
        refreshing: false,
        loading: false,
        currentindex:1,
        // 分页end
        taskList:[],
        taskModel:false,//任务详情
        taskModelParam:'',
        taskFdModel:false,//任务反馈
        showNoData:false,
        taskFdModelParam:'',
        commitfeedbackModel:"",
        taskid:"",
    }
  },
  created(){
    this.$vux.loading.show({
        text: '加载中'
    });
    this.requestData();
    this.$enJsBack()//调用安卓方法（手机back键返回问题）
  },
  methods:{
    refresh () {//下拉刷新
        this.refreshing = true;
         this.showNoData=false;
        this.$refs.container.scrollTop = 0;
        this.taskList=[];
        this.currentindex=1;
        this.requestData();
    },
    load () {//上拉加载更多
        this.loading = true;
        this.currentindex++;
        this.requestData();
    },
    requestData(){//任务列表请求
        let _this=this;
        let user=_this.$store.state.user;
        if(user){
            let param={
                "userid":_this.$store.state.user.userid,
                "orgcode":_this.$store.state.user.orgcode,
                "teamid":_this.$store.state.user.teamid,
                "eventid":_this.refid,
                "pageNo":_this.currentindex,
                "pageSize":10
            };

            taskListAjaxData(param,function(res){
                _this.loading = false;
                _this.refreshing = false;
                _this.showNoData=true;
                if(res.status=='200'){
                    if(_this.currentindex==1){
                        _this.taskList=res.data;
                    }else{
                        if(res.data&&res.data.length>0){
                            res.data.forEach((item,index)=>{
                                console.log(item);
                                _this.taskList.push(item);
                            })
                        }
                    }
                    _this.$vux.loading.hide();
                }
                console.log("res==>",res)
            })
        }else{
            _this.$showBottomToast("获取用户信息失败！ 请重新登录")
        }
    },
    feedbackFlagClick(item){//点击下拉请求任务反馈列表
        var _this = this;
        if(!item.feedbackFlag){
            if(item.feedback){
                item.feedbackFlag=!item.feedbackFlag;
            }else{
                var param={
                    "id":item.taskid
                };
                taskFdAjaxData(param,function(res){
                    if(res){
                        if(res.data.length>0){
                            item.feedback=[];
                            item.feedback=res.data;
                            item.feedbackFlag=!item.feedbackFlag;
                            _this.$forceUpdate();
                        }
                    }else{
                        console.log("返回数据异常",res)
                        _this.$showBottomToast("请求数据异常！")
                    }
                })
            }
            
        }else{
            item.feedbackFlag=!item.feedbackFlag;
        }
        _this.$forceUpdate();
        
    },
    commitfeedback(item){//新增反馈
        this.taskid=item.taskid;
        this.commitfeedbackModel=true;
    },	  
    openInfo(_item){//任务跳转详情
        let _this=this;
        console.log(_item)
        _this.taskModel=true;
        this.taskModelParam=_item.taskid;
    },	  
    openFdInfo(_item){//任务反馈点击跳转详情
        let _this=this;
        console.log(_item)
        _this.taskFdModel=true;
        this.taskFdModelParam=_item;
    },
    closeInfo(){//详情页面点击返回的方法
        this.taskModel=false;
        this.taskFdModel=false;
        this.commitfeedbackModel=false;
        window.GoBack=this.GoBack;
    },
    GoBack(){//返回事件
        this.$closeStates();
        this.$emit("close")
    }
  },
  mounted(){
    window.GoBack=this.GoBack;
  }

}
</script>
 
<style lang="less" scoped>
.taskList{
    width: 100%;
    height: 100%;
    .taskList_content{
        width: 100%;
        height:calc( 100% - 46px );
        padding: 0 15px;
        overflow: auto;
        .taskList_content_list{
            width: 100%;
            background-color: #ffffff;
            box-shadow: 0px 0px 2px 0px 
                rgba(0, 0, 0, 0.2);
            border-radius: 5px;
            margin: 15px 0 30px;
            position: relative;
            .taskList_content_list_task{
                padding: 10px;
                .taskList_content_list_task_tit{
                    div:nth-child(1){
                        font-size: 20px;
                        // line-height: 20px;
                        letter-spacing: 0px;
                        color: #333333;
                        float: left;
                        width: 60%;
                        overflow: hidden;
                        text-overflow: ellipsis; 
                        -o-text-overflow: ellipsis;
                        white-space:nowrap;
                    }
                    div:nth-child(2){
                        float: right;
                        span{
                            padding: 2px 0;
                            border-radius: 23px;
                            letter-spacing: 0px;
                            color: #ffffff;
                            width: 55px;
                            float: left;
                            text-align: center;
                            background-color: #ff0000;
                        }
                        span:nth-child(1){
                            margin-right: 5px;
                            background-color: #ae5da1;
                        }
                        span:nth-child(2){
                            background-color: #e51818;
                        }
                        span.wei{
                            background-color: #eb6100;
                        }
                        span.yi{
                            background-color: #ae5da1;
                        }
                        span.jieshu{
                            background-color: #d2d2d2;
                        }
                    }
                }
                .taskList_content_list_task_feedNum{
                    text-align: right;
                    color: #222222;
                    padding: 5px 0;
                    span{
                        color: #ff0000;
                        font-size: 15px;
                    }
                }
                .taskList_content_list_task_unitTime{
                    margin-bottom: 10px;
                    span:nth-child(1){
                        font-size: 15px;
                    }
                    span:nth-child(2){
                        float: right;
                    }
                }
                .taskList_content_list_task_content{
                    text-indent: 2em;
                    line-height: 1.7;
                    height: 46px;
                    overflow: hidden;
                    word-wrap: break-word;
                    word-break: break-all;
                }
            }
            .taskList_content_list_feedback{
                padding: 10px;
                border-top: 1px solid #c7c7c7;
                div:nth-child(1){
                    margin-bottom: 10px;
                    color: #4dbaf6;
                    span:nth-child(1){
                        // color: #4dbaf6;
                        font-size: 15px;
                    }
                    span:nth-child(2){
                        float: right;
                    }
                }
                div:nth-child(2){
                    text-indent: 2em;
                    line-height: 1.7;
                }
            }
            .taskList_content_list_botton{
                position: absolute;
                bottom: -15px;
                right: 0;
                height: 30px;
                img{
                    height: 100%;
                    margin-right: 10px;
                }
            }
        }
    }
}
</style>